<template>
  <div style="height: 100%;background: #EAEAEA;">
    <div>
      <!-- 订单详情 -->
      <div style="background:white;">
        <div class='order-info-title'>订单详情</div>
        <div class='cart-list-box'>
          <div style='height:50px;line-height:50px;width:35%;padding-left:12px;'>
            <div>{{miao_sha_goods.product_name}}</div>
          </div>
          <div style='width:15%;height:50px;line-height:50px;text-align:center;'>
            <div>¥ {{miao_sha_goods.price}}</div>
          </div>
          <div style='width:50%;height:50px;padding-right:10px;'>
            <div style="display:flex;margin-top:10px;float:right;">
              <div :class="stepper_left_status?'stepper-box':'not-stepper-box'" @click="reduceNumber">-</div>
              <div class="stepper-box">{{goods_number}}</div>
              <div :class="stepper_right_status?'stepper-box':'not-stepper-box'" style="border-right:1px solid #8F8F8F;" @click="addNumber">+</div>
            </div>
          </div>
        </div>
      </div>
      <div class='order-info'>
        <radio-group class="radio-group" @change="radioChange">
          <div class='order-sum' @click="handleRadio(true)">
            <label class="radio-label">
              微信支付
              <radio value="wechat_pay" color="black" :checked="radioChecked" style="float:right;" />
            </label>
          </div>
          <div class='order-sum' @click="handleRadio(false)">
            <label class="radio-label">
              会员支付
              <radio value="card_pay" color="black" :checked="!radioChecked" style="float:right;" />
            </label>
          </div>
        </radio-group>
        <!--<div class='order-sum'>
          <label>应付：￥ {{miao_sha_goods.price}}</label>
          <label class='order-sum-number activity-color'>实付：￥ {{miao_sha_goods.price}}</label>
        </div>-->
      </div>
    </div>
    <!-- 底部操作栏 -->
    <div class="footer zan-row">
      <div class="zan-col zan-col-14" style="background:#fff">
        <div class="flex">
          <div>
            <div style="color:#000;">实付款:<span style="color:red;">￥{{sum_monney}}</span></div>
          </div>
        </div>
      </div>
      <div class="zan-col zan-col-10" style="background:#000">
        <div class="flex">
          <div>
            <div class="buy-title" @click="gopay">立即支付</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      payType: 'wechat_pay',
      radioChecked: true,
      goods_number:1,
      sum_monney:'',
      stepper_left_status:false,
      stepper_right_status:true
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'login_info',
      'shop',
      'miao_sha_goods'
    ]),
  },
  methods: {
    async gopay(){
      let form = {
        miao_sha_id:this.miao_sha_goods.id,
        user_id:this.user.id,
        buy_count:this.goods_number
      }
      let res = await api.submitMiaoShaOrder(form)
      console.log('res=> ',res)
      if (res.code == 0) {
        let pay_form = {
          order_id : res.data,
          pay_method:this.payType,
          open_id:this.login_info.openid
        }
        let result = await api.payMiaoShaOrder(pay_form)
        console.log('result=> ',result)
        if (result.code == 0) {
          if (this.payType == 'wechat_pay') {
            wx.requestPayment({
               'timeStamp': result.data.timeStamp,
               'nonceStr': result.data.nonceStr,
               'package': result.data.package,
               'signType': result.data.signType,
               'paySign': result.data.paySign,
               'success':function(result){
                  console.log('支付成功：',result)
                  wx.showToast({title: "支付成功",icon: 'none'})
               },
               'fail':function(result){
                  console.log('支付失败：',result)
               }
            })
          } else {
            wx.showToast({title: "支付成功",icon: 'none'})
          }
        }
      }else{
        wx.showToast({title: res.msg,icon: 'none'})
      }
    },
    handleRadio(checked) {
      this.radioChecked = checked
      if (checked) {
        this.payType = 'wechat_pay'
      } else {
        this.payType = 'card_pay'
      }
    },
    reduceNumber(){
      this.stepper_right_status = true
      if (this.goods_number == 1) return
      this.goods_number -= 1
      this.sum_monney = this.miao_sha_goods.price * this.goods_number
      if (this.goods_number == 1) {
        this.stepper_left_status = false
      }
    },
    addNumber(){
      this.stepper_left_status = true
      if (this.miao_sha_goods.buy_max > 0 ) {
        if (this.goods_number >= this.miao_sha_goods.buy_max) return
      }
      this.goods_number += 1
      this.sum_monney = this.miao_sha_goods.price * this.goods_number
      if (this.miao_sha_goods.buy_max > 0 ) {
        if (this.goods_number >= this.miao_sha_goods.buy_max){
          this.stepper_right_status = false
        }
      }
    },
    radioChange(e){
      this.payType = e.target.value
    }
  },
  mounted () {
    this.payType = 'wechat_pay'
    this.sum_monney = this.miao_sha_goods.price
  }
}
</script>

<style >
radio{
  transform:scale(0.7);
}
.activity-color{
  color:#FF9C35;
}
.cart-list-box{
  background:#FFFFFF;
  display:flex;
  font-size:15px;
  height: 60px;
  border-bottom:1px #E3E3E3 solid;
}
.list-info{
  width:40%;
  padding:5px 12px;
}
.list-info-size{
  padding-top: 10px;
  color:#B1B1B1;
}
.order-info{
  background: white;
  margin-top:10px;
}
.order-info-title{
  font-size:12px;
  color: #969696;
  padding: 10px 12px;
  border-bottom: 1px #E3E3E3 solid;
}
.order-sum{
  height:30px;
  line-height: 30px;
  padding:5px 15px;
  font-size:15px;
  border-bottom: 1px solid #E3E3E3;
}
.order-sum-number{
  font-size:15px;
  float:right;
}
.footer {
   position: fixed;
   left: 0px;
   bottom: 0px;
   width: 100%;
   height: 50px;
   background-color: #eee;
   z-index: 9999;
}
.flex{
  /*flex 布局*/
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;

  text-align: justify;
  width: 100%;
  height: 50px;
  margin:0 auto;
  color: #000;
}
.buy-title {
  font-size:16px;
  text-align:center;
  color:#FFF;
}
.stepper-box{
  border-top:1px solid #8F8F8F;
  border-left:1px solid #8F8F8F;
  border-bottom:1px solid #8F8F8F;
  width:35px;
  height:30px;
  text-align:center;
  line-height:30px;
}
.not-stepper-box{
  border-top:1px solid #8F8F8F;
  border-left:1px solid #8F8F8F;
  border-bottom:1px solid #8F8F8F;
  background: #F5F5F5;
  width:35px;
  height:30px;
  text-align:center;
  line-height:30px;
}
</style>
